<template>
  <view>
    <view class="scroll--view-container">
      <!-- 左侧 -->
      <scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh+'px'}">
        <block v-for="(item,i) in cateList" :key="i">
          <view :class="['left-scroll-view-item',i===active?'active':'']" @click="activeChanged(i)">{{item.cat_name}}
          </view>
          <!-- <view>{{item.children}}</view> -->
        </block>

      </scroll-view>
      <!-- 右侧 -->
      <scroll-view class="right-scroll-view" scroll-y:true :style="{height: wh +'px'}">
        <view class="cate-lv2" v-for="(item2,i2) in cateLevel2" :key="i2">
          <view class="cate-lv2-title">/{{item2.cat_name}}/</view>
          <!-- 动态渲染三级分类的列表数据 -->
          <view class="cate-lv3-list">
            <!-- 三级分类 Item 项 -->
            <view class="cate-lv3-item" v-for="(item3,i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
              <!-- 图片 -->
              <image :src="item3.cat_icon"></image>
              <!-- 文本 -->
              <text>{{item3.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        //当前设备可用的高度
        wh: 0,
        cateList: [],
        active: 0,
        cateLevel2: []
      };
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight
      this.getCateList()
    },
    methods: {
      //获取分类数据
      async getCateList() {
        // const{data:res} =  await uni.$http.get('/api/public/v1/categories')
        // if(res.meta.status !==200) return uni.$showMsg()
        const res = {
          "message": [{
              "cat_id": 1,
              "cat_name": "电视一级",
              "cat_pid": 0,
              "cat_level": 0,
              "cat_deleted": false,
              "cat_icon": "",
              "children": [{
                  "cat_id": 3,
                  "cat_name": "电视二级",
                  "cat_pid": 1,
                  "cat_level": 1,
                  "cat_deleted": false,
                  "cat_icon": "",
                  "children": [{
                    "cat_id": 5,
                    "cat_name": "曲面电视三级",
                    "cat_pid": 3,
                    "cat_level": 2,
                    "cat_deleted": false,
                    "cat_icon": "/static/my-xrmj/sanji/mj1.png"
                  },{
                    "cat_id": 5,
                    "cat_name": "曲面电视三级",
                    "cat_pid": 3,
                    "cat_level": 2,
                    "cat_deleted": false,
                    "cat_icon": "/static/my-xrmj/sanji/mj2.png"
                  },
                  {
                    "cat_id": 5,
                    "cat_name": "曲面电视三级",
                    "cat_pid": 3,
                    "cat_level": 2,
                    "cat_deleted": false,
                    "cat_icon": "/static/my-xrmj/gzmj.png"
                  },
                  {
                    "cat_id": 5,
                    "cat_name": "曲面电视三级",
                    "cat_pid": 3,
                    "cat_level": 2,
                    "cat_deleted": false,
                    "cat_icon": "/static/my-xrmj/gzmj.png"
                  }]
                },
                {
                  "cat_id": 3,
                  "cat_name": "电视二级2",
                  "cat_pid": 1,
                  "cat_level": 1,
                  "cat_deleted": false,
                  "cat_icon": "",
                  "children": [{
                    "cat_id": 5,
                    "cat_name": "曲面电视三级2",
                    "cat_pid": 3,
                    "cat_level": 2,
                    "cat_deleted": false,
                    "cat_icon": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
                  }]
                }
              ]
            },
            {
              "cat_id": 1,
              "cat_name": "复杂色系一级",
              "cat_pid": 0,
              "cat_level": 0,
              "cat_deleted": false,
              "cat_icon": "",
              "children": [{
                  "cat_id": 3,
                  "cat_name": "复杂色系二级",
                  "cat_pid": 1,
                  "cat_level": 1,
                  "cat_deleted": false,
                  "cat_icon": "",
                  "children": [{
                    "cat_id": 5,
                    "cat_name": "复杂色系三级",
                    "cat_pid": 3,
                    "cat_level": 2,
                    "cat_deleted": false,
                    "cat_icon": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
                  }]
                },
                {
                  "cat_id": 3,
                  "cat_name": "复杂色系二级",
                  "cat_pid": 1,
                  "cat_level": 1,
                  "cat_deleted": false,
                  "cat_icon": "",
                  "children": [{
                    "cat_id": 5,
                    "cat_name": "复杂色系三级",
                    "cat_pid": 3,
                    "cat_level": 2,
                    "cat_deleted": false,
                    "cat_icon": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
                  }]
                }
              ]
            }

          ],
          "meta": {
            "msg": "获取成功",
            "status": 200
          }
        }
        this.cateList = res.message
        console.log("cateList:" + this.cateList)
        //为二级分类赋值
        this.cateLevel2 = res.message[0].children //就是this.cateList[0].children
        console.log("cateLevel2:" + res.message[0].children[0].cat_name)
      },
      activeChanged(i) {
        this.active = i
        this.cateLevel2 = this.cateList[i].children
        console.log("cateLevel2ii:" + this.cateLevel2[0].cat_name)

      },
    //点击三级分类项跳转到商品列表页面
    gotoGoodsList(item3){
       uni.navigateTo({
            url:'/subpkg/goods_list/goods_list?cid=' + item3.cat_id
        })
    }
    }
  }
</script>

<style lang="scss">
  .scroll--view-container {
    display: flex;

    .left-scroll-view {
      width: 120px;
    }
  }

  .left-scroll-view-item {
    line-height: 60px;
    text-align: center;
    font-size: 12px;
    background-color: #F7F7F7;

    //元素的class样式既有left-scroll-view-item又有active
    &.active {
      background-color: #00CC00;
      position: relative;

      //每个元素都有两个伪元素。一个before一个agfter
      //伪元素渲染出左侧矩形的红色带
      &::before {
        content: ' ';
        display: block;
        width: 3px;
        height: 30px;
        background-color: #C00000;
        position: absolute; //子元素需要上面定一个父元素position: relative;子随父项
        top: 50%;
        left: 0;
        //往回撤他50%的高度 translate需要加上Y，才是高度
        transform: translateY(-50%);
      }
    }
  }

  .cate-lv2-title {
    font-size: 12px;
    font-weight: bold;
    text-align: center; // justify-content:space-between;这个不对
    padding: 15px 0;
  }

  .cate-lv3-list {
    display: flex;
    flex-wrap: wrap;

    .cate-lv3-item {
     width: 33.33%;
     margin-bottom: 100px;
     display: flex;
     flex-direction: column;
     align-items:center;
      image {
        width: 60px;
        height: 60px;
      }
      text {
        font-size: 12px;
      }
    }
  }
</style>